import WebGl from '@/modules/three';
import Calc from '@/modules/calc';
const { Three, TWEEN, dat, Stats } = WebGl;

export default class Particle {
  system: any;
  group: any;
  x: number;
  y: number;
  z: number;
  size: number;
  color: number;
  opacity: number;
  angle: number;
  radiusBase: number;
  sizeBase: number;

  geometry: any;
  mesh: any;
  material: any;

  constructor(config: any, system: any) {
    this.system = system;

    this.group = config.group;
    this.x = config.x;
    this.y = config.y;
    this.z = config.z;
    this.size = config.size;
    this.color = config.color;
    this.opacity = config.opacity;

    this.angle = config.angle;
    this.radiusBase = config.radius;
    this.sizeBase = config.size;

    this.createMesh();
  }

  createMesh() {
    this.geometry = this.system.Geometrys.sphereGeometry;

    this.material = new Three.MeshBasicMaterial({
      color: this.color,
      transparent: true,
      opacity: this.opacity,
      depthTest: false,
      precision: 'lowp',
    });

    this.mesh = new Three.Mesh(this.geometry, this.material);

    this.mesh.position.x = this.x;
    this.mesh.position.y = this.y;
    this.mesh.position.z = this.z;

    this.mesh.scale.set(this.size, this.size, this.size);

    this.group.add(this.mesh);
  }

  update() {
    this.angle -=
      Math.cos(
        this.system.elapsedMilliseconds * 0.0025 - this.radiusBase * 0.15,
      ) *
      0.02 *
      this.system.deltaTimeNormal;

    this.mesh.position.x = Math.cos(this.angle) * this.radiusBase;
    this.mesh.position.y = Math.sin(this.angle) * this.radiusBase;
    this.mesh.position.z =
      Math.cos(
        this.system.elapsedMilliseconds * 0.005 - this.radiusBase * 0.3,
      ) * 10;

    let freeScale = Math.cos(
      this.system.elapsedMilliseconds * 0.005 - this.radiusBase * 0.6,
    );
    let lockScale = Calc.clamp(freeScale, 0, 1);
    let scale = this.sizeBase + lockScale * 0.2;
    this.mesh.scale.set(scale, scale, scale);
  }
}
